<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>Java</title>
	<link rel="stylesheet" th:href="@{/codemirror/lib/codemirror.css}"/>
	<link rel="stylesheet" th:href="@{/codemirror/theme/eclipse.css}"/>
	<style>
		html, body {
			background: rgb(245, 245, 245);
			padding: 0;
			margin: 0;
			height: 100%;
			width: 100%;
		}

		.container {
			position: relative;
			top: 50%;
			left: 50%;
			height: 95%;
			width: 95%;
			transform: translate(-50%, -50%);
			background: rgb(255, 255, 255);
			display: flex;
			border: 1px solid rgba(0, 0, 0, .2);
			flex-direction: column;
		}

		/*滚动条整体样式*/
		#result::-webkit-scrollbar {
			width: 7px;     /*高宽分别对应横竖滚动条的尺寸*/
			height: 1px;
		}

		/*滚动条里面小方块*/
		#result::-webkit-scrollbar-thumb {
			border-radius: 10px;
			-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
			background: rgba(0, 0, 0, 0.15);
		}

		/*滚动条里面轨道*/
		#result::-webkit-scrollbar-track {
			-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
			border-radius: 10px;
			background: #EDEDED;
		}

		#result:focus {
			outline: none;
		}

		.CodeMirror {
			border: 1px solid rgba(0, 0, 0, .3);
		}

		.boxShadow {
			border: 1px solid rgba(30, 144, 255, .5);
			box-shadow: 0 0 2px rgba(0, 191, 255, .8);
		}

		.CodeMirror-scroll {
			font-size: 16px;
		}
	</style>
</head>
<body>
<div class="container">
	<div style="line-height: 50px; border-bottom: 1px solid rgba(0,0,0,.3); background: rgb(245,245,245);">
		<button id="compiler" type="button" style="line-height: 25px; margin-left: 15px;">点击运行</button>
	</div>
	<div style="flex: 1; display: flex; flex-direction: column;">
		<div id="codeBox" style="flex: 2; padding: 15px;">
			<textarea id="editor"></textarea>
		</div>
		<div id="resultBox" style="flex: 1; padding: 0 20px 15px 15px;">
			<textarea id="result" style="width: 100%; height: 99%; resize: none; font-size: 16px;" readonly></textarea>
		</div>
	</div>
</div>

<script type="text/javascript" th:src="@{/jquery/jquery-3.5.1.min.js}"></script>
<script type="text/javascript" th:src="@{/codemirror/lib/codemirror.js}"></script>
<!-- 代码高亮 -->
<script type="text/javascript" th:src="@{/codemirror/mode/clike/clike.js}"></script>
<script>
    let editor;
    let code = 'public class Compile {\n' +
        '    public static void main (String []args) {\n' +
        '       int count = method(10);\n' +
        '       System.out.println("count = " + count);\n' +
        '    }\n' +
        '    \n' +
        '    private static int method(int len) {\n' +
        '        int count = 0;\n' +
        '        for (int i = 1; i <= len; i++) {\n' +
	    '            System.out.println("i = " + i);\n' +
        '            count += i;\n' +
        '        }\n' +
        '        return count;\n' +
        '    }\n' +
        '}';

    $(function () {
        initEditor();
        editor.setValue(code);
        $('#compiler').on('click', function() {
            compiler();
        });
    });

    let initEditor = function () {
        editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
            mode: 'text/x-java',
            lineNumbers: true,
            styleActiveLine: true,
            scrollbarStyle: 'null',
            theme: 'eclipse',
            gutters: ['CodeMirror-linenumbers'],
            matchBrackets: true,
            indentUnit: 4,
            showCursorWhenSelecting: true,
        });
        editor.setSize('100%', '100%');
        editor.on('focus', function () {
            $('.CodeMirror').addClass('boxShadow');
        });
        editor.on('blur', function () {
            $('.CodeMirror').removeClass('boxShadow');
        });

        // 最大高度
        let codeBox = $('#codeBox');
        codeBox.css('max-height', codeBox.height());
    };

    let compiler = function() {
      let value = editor.getValue();
      $('#result').html('编译中...');
      $.ajax({
	      url: 'exec/JavaCompile',
	      type: 'POST',
	      data: {
	          code: value
	      },
	      success: function(res) {
			$('#result').html(res.result);
	      }
      })
    };

</script>
</body>
</html>
